﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link rel="stylesheet" type="text/css" href="css/playlist.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.6/tiny/jquery.tools.min.js"></script>
<script type="text/javascript" src="player/flowplayer-3.2.10.min.js"></script>

<script src="js/design.js" type="text/javascript"></script>
</head>

<body>
<div style="float:left;width:240px;">

    <a class="go up"></a>

    <div class="playlist">

        <div class="clips low">

            <div class="page">
                <a href="http://flowplayer.org/demos/standalone/plugins/javascript/playlist/KimAronson-TwentySeconds59483.flv" class="first">
                    Palm trees and a hot sun <br />
                    <em>0:20 min</em>
                </a>

                <a href="http://flowplayer.org/demos/standalone/plugins/javascript/playlist/KimAronson-TwentySeconds58192.flv">
                    Playing around with toes <br />
                    <em>0:20 min</em>
                </a>

                <a href="http://flowplayer.org/demos/standalone/plugins/javascript/playlist/KimAronson-TwentySeconds63617.flv">
                    Small lake and a bicycle <br />
                    <em>0:20 min</em>
                </a>

                <a href="http://flowplayer.org/demos/standalone/plugins/javascript/playlist/KimAronson-TwentySeconds73213.flv">
                    Things on the table and hidden camera <br />
                    <em>0:20 min</em>
                </a>

                <a href="http://flowplayer.org/demos/standalone/plugins/javascript/playlist/KimAronson-TwentySeconds1318.flv">
                    Girl in mall <br />
                    <em>0:20 min</em>
                </a>
            </div>

            <div class="page">
                <a href="http://flowplayer.org/demos/standalone/plugins/javascript/playlist/KimAronson-TwentySeconds4461.flv">
                    Twisting egg <br />
                    <em>0:21 min</em>
                </a>

                <a href="http://flowplayer.org/demos/standalone/plugins/javascript/playlist/KimAronson-TwentySeconds70930.flv">
                    Eating Sushi <br />
                    <em>0:21 min</em>
                </a>

                <a href="http://flowplayer.org/demos/standalone/plugins/javascript/playlist/KimAronson-TwentySeconds58192.flv">
                    Playing around with toes again <br />
                    <em>0:23 min</em>
                </a>

                <a href="http://flowplayer.org/demos/standalone/plugins/javascript/playlist/KimAronson-TwentySeconds71844.flv">
                    Random Miniature Characters <br />
                    <em>0:21 min</em>
                </a>

                <a href="http://flowplayer.org/demos/standalone/plugins/javascript/playlist/KimAronson-TwentySeconds73213.flv">
                    Things on the table again <br />
                    <em>0:21 min</em>
                </a>
            </div>

            <div class="page">
                <a href="http://flowplayer.org/demos/standalone/plugins/javascript/playlist/KimAronson-TwentySeconds59483.flv">
                    Palm trees and a hot sun again <br />
                    <em>0:21 min</em>
                </a>
            </div>

        </div>

    </div>

    <a class="go down"></a>

</div>
<a id="player" class="player" style="float:left;width:450px;">
   
</a>
<!-- let rest of the page float normally -->
<br clear="all" />
<script type="text/javascript">
$(function() {
    // set up scrolling for the playlist elements
    $("div.playlist").scrollable({
        items:'div.clips',
        vertical:true,
        next:'a.down',
        prev:'a.up'
    });

    // set up player
    $f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {

        clip: {baseUrl: 'http://stream.flowplayer.org'}

    // use playlist plugin to enable playlist items work as movie clips
    }).playlist("div.clips");
});

</script>

</body>

</html>
